<?php use_helper('I18N'); ?>

<script type="text/javascript">
$(function() {
    $(".faq").click(function(event){
        event.preventDefault();

        $(".gvFaqDefaultContent").each(function (key, value) {
            $(this).hide(500);
        });
        $("#gvFaqDefaultContent" + $(this).attr("ref")).show(500);
    });
});
</script>

<div id="content">
    <table id="contentMainWrapper" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
        <tr>
            <td id="column-left" style="width: 215px;">
                <div style="width:215px;">
                    <!--// bof: categories //-->
                    <div class="box" id="categories" style="width:215px;">
                        <div class="box-border">
                            <div class="box-head">
                                <?php echo __('Categories') ?>
                            </div>
                            <div class="box-body">
                                <?php include_component('component', 'categoriesSideMenu') ?>
                            </div>
                        </div>
                    </div>
                    <!--// eof: categories //-->
                    <!--// bof: specials //-->
                    <div class="box" id="specials" style="width:215px;">
                        <div class="box-border">
                            <div class="box-head">
                                <a href="<?php echo url_for("/product/specialItem") ?>" class="faq"><?php echo __('Specials') ?></a>
                            </div>
                            <div class="box-body">
                                <?php include_component('component', 'specialsSideMenu', array('param' => 'will implement for categoryType')) ?>
                            </div>

                        </div>
                    </div>
                    <!--// eof: specials //-->
                </div>
            </td>
            <td id="column-center" valign="top">
                <div class="column-center-padding">
                    <div id="gvFaqDefault" class="centerColumn">

                        <h1 id="gvFaqDefaultHeading"><?php echo __('FAQ') ?></h1>

                        <div class="content" id="gvFaqDefaultMainContent"><a name="Top"></a>
                            <?php foreach ($faqs as $faq): ?>
                                <a href="#" ref="<?php echo $faq->getFaqId(); ?>" class="faq"><?php echo $faq->getFaqTitle(); ?></a><br>
                            <?php endforeach; ?>
                        </div>

                        <?php foreach ($faqs as $faq): ?>
                            <div class="content gvFaqDefaultContent" id="gvFaqDefaultContent<?php echo $faq->getFaqId(); ?>" style="display: none;">
                                <h2 id="gvFaqDefaultSubHeading"><?php echo $faq->getFaqTitle(); ?></h2>

                                <?php echo $faq->getFaqAnswer(); ?>
                            </div>
                        <?php endforeach; ?>
                    </div>

                    <div class="clear"></div>
                    <!--eof content_center-->
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>